<template>
  <view class="bg">
    <u-tabs :list="tabList" active-color="#6BAEFF" inactive-color="#2E3C4D"	 :is-scroll="false" :current="current" @change="change"></u-tabs>
    <u-empty text="暂无记录" mode="favor" margin-top="400"	v-if="list.length == 0"></u-empty>
    <view class="order__list" v-for="order in list" :key="order.id">
      <view class="order__top">
        <view class="order__number">订单编号：{{order.orderNum}}</view>
        <view class="order__status " v-if="order.status == 0">待支付</view>
        <view class="order__status" v-if="order.status == 1">交易成功</view>
        <view class="order__status" v-if="order.status == 2">交易失败</view>
      </view>
      <view class="order__center">
        <view class="order__center-info">
          <text class="combo__name">{{order.goodsName}}</text>
          <view class="combo__price"><text>¥</text>{{order.amount}}</view>
        </view>
        <text class="pay__user">付款用户：{{order.payName}}</text>
      </view>
      <view class="order__bottom">
        <view class="order__time" v-if="order.status == 0">创建：{{order.createTime}}</view>
        <view class="order__time" v-if="order.status == 1">支付时间：{{order.payTime}}</view>
        <view class="order__time" v-if="order.status == 2">关闭时间：{{order.closeTime}}</view>
        <view class="pay__price" v-if="order.status == 1">
          <text>实付：</text>
          <view><text>¥</text>{{order.amount}}</view>
        </view>
        <view class="pay__btn" v-if="order.status == 0" @click="pay(order.orderNum)">
          支付{{order.amount}}元
        </view>
      </view>
    </view>
    <w-loading text="加载中..." mask="true" click="true" ref="loading"></w-loading>

  </view>
</template>
<script>
import {orderList,orderCreate,payOrder,orderPay} from "../../api/shop";

export default {
  data() {
    return {
      tabList: [{
        name: '待支付'
      }, {
        name: '交易成功'
      }, {
        name: '交易失败',
      }],
      current: 0,
      query:{
        shopId:"",
        pageNum:1,
        pageSize:10,
        status:0

      },
      total:0,
      list:[]
    }
  },
  onLoad() {
    this.query.shopId = uni.getStorageSync('userInfo').id;
  },
  onShow(){
    this.query.pageNum = 1;
    this.getList(1)
  },
  methods: {
    change(index) {
      this.current = index;
      this.query.status = index;
      this.query.pageNum = 1;
      this.getList(1);
    },
    getList(type){
      this.$refs.loading.open()
      orderList(this.query).then(res =>{
        this.$refs.loading.close()
        this.total = res.total
        if (type == 1){
          this.list = res.rows
        }
        if (type == 2){
          this.list.push.apply(this.list,res.rows)
        }
      }).catch(err =>{
        this.$refs.loading.close()
      })
    },
    pay(orderNum){
      const _this = this;
      orderPay({
        orderNum:orderNum
      }).then(pay =>{
        let parameter = pay.data
        wx.requestPayment({
          timeStamp: parameter.timeStamp,
          nonceStr: parameter.nonceStr,
          package: parameter.packageValue,
          signType: parameter.signType,
          paySign: parameter.paySign,
          success (res) {
            _this.list.forEach((item,index) =>{
              if (item.orderNum == orderNum){
                _this.list.splice(index,1)
              }
            })
            _this.getList(2);
            uni.showToast({
              title: '支付成功',
              icon:"success",
              duration: 2000
            });
          },
          fail (res) {
            console.log(res);
          }
        })
      })
    },
  },
  onReachBottom() {
    if (this.query.pageNum * this.query.pageSize < this.total) {
      this.query.pageNum += 1;
      this.getList(2)
    }
  }
}
</script>

<style lang="scss" scoped>
  .bg{
    width: 100vw;
    min-height: 100vh;
    background: #F8F9F9;
  }
  .blue{
    color: #396CF4;
  }
  .order__list{
    width: 90%;
    margin: 40rpx auto;
    border-radius: 8rpx;
    background: #ffffff;
    padding: 40rpx;
    .order__top{
      display: flex;
      justify-content: space-between;
      color: #BEBEBE;
    }
    .order__center{
      width: 100%;
      .order__center-info{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 140rpx;
        .combo__name{
          width: 75%;
          color: #2E3C4D;
          font-size: 37rpx;
          word-break: break-all;
          text-overflow: ellipsis;
          overflow: hidden;
          display: -webkit-box;//必须结合的属性 ，将对象作为弹性伸缩盒子模型显示
          -webkit-line-clamp: 2; //用来限制在一个块元素显示的文本的行数
          -webkit-box-orient: vertical;// 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式
        }
        .combo__price{
          color: #AEB3C0;
          font-size: 28rpx;
          >text{
            font-size: 20rpx;
          }
        }

      }
      .pay__user{
        display: block;
        margin-bottom: 50rpx;
        color: #AEB3C0;
      }
    }
    .order__bottom{
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 24rpx;
      .order__time{
        color: #AEB3C0;
      }
      .pay__price{
        display: flex;
        align-items: center;
        >view{
          font-size: 32rpx;
          font-weight: bold;
          >text{
            font-size: 22rpx;
          }
        }
      }
      .pay__btn{
        color: #ffffff;
        text-align: center;
        background: #D8D8D8 linear-gradient(90deg, #396CF4 0%, #4090EC 100%);
        border-radius: 7rpx;
        letter-spacing: 5rpx;
        padding: 10rpx 10rpx;
      }
    }
  }

</style>
